<template>
	<view class="list" v-if="$_columns.length">
		<template v-for="(i, key) in $_columns">
			<view class="item" :style="Object.assign({ width: `${100 / row}%` }, i.style)" :key="key" v-if="$_item_show[i.key] && !i.hide">
				<slot :name="i.slot" :row="i" :value="$_value[i.key]">
					<view class="row" v-if="!i.render">
						<text class="lable" :style="{ color: i.color }">{{ i.name || i.lable }}</text>
						<y-table
							:style="{ flex: i.block ? 'auto' : '1', marginTop: i.block ? '.4em' : 0, color: i.color }"
							:scroll="i.scroll"
							v-if="Array.isArray($_value[i.key]) && i.type != 'Related'"
							class="value"
							:showBottomSum="i.showBottomSum"
							:headers="i.columns"
							:value="$_value[i.key]"
						></y-table>
						<view v-else :style="{ flex: i.block ? 'auto' : '1', color: i.color }" class="value">
							<a style="margin-left: .5em;" v-if="!($_value[i.key] + '').indexOf('dingtalk://')" :href="$_value[i.key]">查看与补充</a>
							<!-- <a v-if="!($_value[i.key] + '').indexOf('dingtalk://')" href="javascript:;" @click="go($_value[i.key])">查看与补充</a> -->
							<template v-else-if="i.type === 'Related'">
								<Related :value="$_value[i.key]" :keys="i" />
							</template>
							<template v-else>
								{{ $_value[i.key] }}{{ i.unit }}
							</template>
						</view>
					</view>
				</slot>
				<view class="row" v-if="i.render">
					<text class="lable" :style="{ color: i.color }" v-if="i.lable">{{ i.lable }}</text>
					<Expand :style="{ flex: i.block ? 'auto' : '1', marginTop: i.block ? '.4em' : 0, color: i.color }" :row="i" :value="$_value[i.key]" :render="i.render"></Expand>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
import yTable from '../y-table/y-table.vue';
import Expand from './expand.js';
import Related from '../y-form/related.vue';
import {stringObject} from "../utils/api.js";
export default {
	components: {
		yTable,
		Expand,
		Related
	},
	props: {
		value: {
			type: Object,
			default() {
				return {};
			}
		},
		columns: {
			type: Array,
			default() {
				return [];
			}
		},
		row: {
			type: Number,
			default: 2
		}
	},
	computed: {
		$_value() {
			let o = { ...(this.value || {}) };
			this.$_columns.map(x => {
				typeof x.init === 'function' && x.init(o, x);
				typeof x.lable === 'function' && x.lable(o, x);
			});
			return o;
		},
		$_columns() {
			if (Array.isArray(this.columns)) {
				return this.columns;
			} else if (this.columns instanceof Object) {
				return Object.keys(this.columns).map(key => {
					const x = this.columns[key] || {};
					x.key = key;
					return x;
				});
			}
			return [];
		},
		$_item_show() {
			let o = {};
			for (let i in this.$_value) {
				const val = this.$_value[i] + '';
				o[i] = !!val && val !== 'undefined' && val !== 'null' && val !== 'NaN';
			}
			return o;
		}
	},
	methods:{
		go(e){
			let {url} = stringObject(e);
			url = decodeURIComponent(url).split("#")[1];
			uni.navigateTo({
				url
			});
		}
	}
};
</script>

<style lang="scss">
.list {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	font-size: 13px;
	.item {
		box-sizing: border-box;
		line-height: 1.2em;
		font-size: inherit;
		width: 50%;
		&:nth-child(even) {
			// justify-content: flex-end;
		}
		.row {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: inherit;
			white-space: inherit;
			.lable,
			.value {
				padding: 3px 0;
				font-size: 28rpx;
			}
			.lable {
				color: #878787;
				white-space: nowrap;
				margin-right: .1em;
				padding: 3px 0;
			}
			.value {
				flex: 1;
				display: inline-block;
				white-space: inherit;
				color: #1c1c1c;
				word-wrap: break-word;
				word-break: break-all;
			}
		}
	}
}
</style>
